<template>
  <div>
    <div class="thumb_panel" ref="thumbPanel">
      <!-- 图片尺寸优化 -->
      <img v-if="!play" :src="[imageUrl+'?x-oss-process=image/resize,w_'+this.calcWidth]" height="100%" width="100%" @click="OnClick">
      <div v-if="goods.videourl">
        <video ref="videoPlayer" height="300" width="100%" preload="auto" type="video/mp4" :src="this.goods.videourl" @ended="play=false" controls playsinline="true" webkit-playsinline="true" x5-playsinline="true" :style="{display: play ? 'block' : 'none'}">您的浏览器不支持 video 标签。</video>
        <div class="stop_text" :style="{display: play ? 'block' : 'none'}" @click="stopVideo">关闭</div>
      </div>
      <div class="tag_zttkURL" v-if="goods.zttkURL && !play"  @click="OnClick">
        <img :src="goods.zttkURL" width="100%" border-radius= "8px">
      </div>
      <div v-if="timeover">
        <div class="shouqing_mask"></div>
        <div class="timeover_image"  @click="OnClick"></div>
      </div>
      <div v-else-if="shouqing">
        <div class="shouqing_mask"></div>
        <div class="shouqing_image"  @click="OnClick"></div>
      </div>
      <div v-else-if="goods.videourl && !play" class="play_btn">
        <van-icon name="play" size="60px" class="red" @click="playVideo" />
      </div>
      <!-- 扩大分享点击的范围 -->
      <div class="share_icon" v-if="!play" @click="onShare">
        <van-icon name="share" class="red" size="20px" />
      </div>
       <!-- 添加：商品简介 -->
      <div class="pro_into" v-if="goods.selling && !play" ref="sell">{{goods.selling}}
      </div>
    </div>
    <div class="foucs_text" v-if="!play">关注：{{goods.viewcount}}
      <div v-if="goods.zhibo">
        <img src="@/assets/images/zhibo.png" height="100%"> 直采直播中...
      </div>
    </div>
    <!-- 商品添加品牌 -->
    <div class="brand" v-if="goods.pictureImg && !play">
      <!-- 图片尺寸优化 -->
      <img :src="goods.pictureImg" alt="">
    </div> 
    <div v-if="!play">
      <div class="tag_icon">
        <img v-if="goods.ismao" src="@/assets/images/mmy.png" width="100%">
        <img v-else-if="goods.ismiaosha" src="@/assets/images/miaosha01.png" width="100%">
        <img v-else-if="goods.ishot" src="@/assets/images/baokuan01.png" width="100%">
        <img v-else-if="goods.isnew" src="@/assets/images/xp03.png" width="100%">
        <img v-else-if="goods.iszhicai" src="@/assets/images/jdzc-1.png" width="100%">
        <img v-else-if="goods.isfanchang" src="@/assets/images/bk03.png" width="100%">
      </div>
      <div class="tag_text">
        <img v-if="goods.isgerida" src="@/assets/images/grd.png" height="26">
        <img v-else-if="goods.iszhicai" src="@/assets/images/jdzc-2.png" height="26">
        <img v-else-if="goods.isfashi" src="@/assets/images/jyfs0901.png" height="26">
      </div>
    </div>
    <div v-if="goods.selfvalue"><span class="tagline">{{goods.selfvalue}}</span></div>
    <h3 class="name_text" @click="OnClick">
      {{goods.title}}{{goods.specTitle}}
      <!-- 积分商品标识 -->
      <img src="../../../assets/images/jifen.png" class="points" v-if="(goods.iscredits==1) && goods.productId">
      </h3>
      <div style="overflow:hidden;">
         <div style="float:left;">
      <div class="price_panel">
        <span v-if="goods.vipprice && goods.isvip" class="vip_panel">
          <b>{{goods.vipprice}}</b>
        </span>
        <span class="notice_text" :style="{color: goods.vipprice && goods.isvip ? 'black' : '#df0f18'}">¥<span style="font-size: 24px;"><b>{{goods.marketprice}}</b></span></span>
        <span style="margin-left: 10px;"><s>¥{{goods.productprice}}</s></span>
      </div>
      <div>已售
        <span class="notice_text" v-if='!notstart'><b>{{goods.salesreal + goods.sales}}</b></span>
        <span class="notice_text" v-else><b>0</b></span>
        {{goods.unit}}
        <span> / 剩余<span>{{goods.total - goods.salesreal}}</span>{{goods.unit}}</span>
        <div class="limitBuy" v-if="goods.usermaxbuy">每人限购<span class="limitNum">{{goods.usermaxbuy}}</span>{{goods.unit}}</div>
      </div>
    </div>
    <div v-if="showCartBtn" style="float: right; text-align: right;margin-top: 15px;">
      <van-button v-if="notstart" class="cart_button" style="background-color: darkgray;">{{goods.timestart | dateTimeFormat}}</van-button>
      <van-button v-else-if="timeover" class="cart_button" style="background-color: darkgray;">已停止购买</van-button>
      <van-button v-else-if="shouqing" class="cart_button" style="background-color: darkgray;">已售罄</van-button>
      <template v-else>
        <van-stepper class="goods_stepper" v-if="!goods.hasoption && goods.cartNum > 0" v-model="cartNum" @change="onNumChange" min="0" :disable-input="true"/>
        <van-button v-else type="danger" class="cart_button" @click="addCart">加入购物车
          <b v-if="cartNum > 0" class="cart_info">+{{cartNum}}</b>
        </van-button>
      </template>
      <div v-if="goods.uncancelable === 1" style="color: gray; font-size: 12px;">该商品不支持无理由退单</div>
    </div>
      </div>
   
    <hr size=1 style="color: #f0f0f0;border-style:dashed;width:100%" >
    <div style="font-size:11px;">
      <span>销售时间：{{goods.timestart | dateTimeFormat}} 至 {{goods.timeend | dateTimeFormat}}</span>
      <span style="float:right;">提货时间：{{pickupTime | dateTimeFormat}}</span>
    </div>
    <!-- 生成海报 -->
    <play-bill  @handlebill='handlebill' :billData='billData' v-if="this.isShare" :qrImage="qrImage"/>
    <van-popup v-model="show" class="open" v-if='billImageUrl'>
        <van-icon name="close" class="close" size="22px" color="#fff" @click="quanClose"/>
        <img :src="billImageUrl" alt="" class="openImg" ref="billImg">
        <div class='save_img'>
            <van-button type="danger" class="save">长按图片可保存哦~</van-button>
        </div>
    </van-popup>
    
  </div>
</template>
<script>
import item_mix from "@/vue/mixin/item-card";
import get_config from "@/vue/mixin/get-config";
import wx from 'weixin-js-sdk';
import {GOODS_SHARE,APP_MASTER} from "@/api/goods";
import {Stepper} from 'vant';
import moment from 'moment';
import Play_bill from "@/vue/components/play-bill/"
import wxConfig from '@/vue/mixin/wx-config';
import { QR_CREATE } from '@/api/global';
import { Toast } from 'vant';
export default {
  name: "item-card-big",
  mixins: [item_mix, get_config],

  props: {
    showCartBtn: Boolean
  },

  data() {
    const clientW = document.body.clientWidth || document.documentElement.clientWidth;
    const imageHeight = clientW ? clientW * 3 / 5 : 250;
    return {
      imageHeight,
      clientW,
      shopId: this.getUser().upshopTid,
      play: false,
      cartNum: this.goods.cartNum,
      serverTime: window.serverTime || Date.now(),
      billImageUrl:'',
      isShare:false,
      show:false,
      calcWidth:'',
      billData:'',//海报数据
      qrImage:""
    };
  },

  created() {
    this.getGlobalConfig();
  },
  mounted(){
    //获取宽度
    this.calcWidth = this.$refs.thumbPanel.offsetWidth*2;
     if (this.$refs.sell) {
       if(this.goods.sellingType == 1) {
          // 玫红
            this.$refs.sell.style.backgroundColor = "#FF0066"
        } else if (this.goods.sellingType == 2) {
          //橙色
            this.$refs.sell.style.backgroundColor = "#ff6600"
        }else if (this.goods.sellingType == 3) {
          //绿色
            this.$refs.sell.style.backgroundColor = "#00cc66"
        }
     }
    
  },
  activated() {
    this.serverTime = window.serverTime || Date.now();
  },

  watch: {
    'goods.cartNum': function() {
      this.cartNum = this.goods.cartNum;
    }
  },

  computed: {
    imageUrl() {
      return this.convertImageUrl(this.goods.thumb);
    },

    shouqing() {
      return (this.goods.total <= this.goods.salesreal);
    },

    notstart() {
      return this.serverTime < moment(this.goods.timestart).utc();
    },

    timeover() {
      return this.serverTime > moment(this.goods.timeend).utc();
    },

    showVideo() {
      return this.goods.videourl && this.play;
    }
  },

  methods: {
    //点击关闭按钮，英藏图片
    quanClose(){
        this.show = false;
    },
    handlebill(el){
      this.billImageUrl = el.imgUri;
    },
    addCart() {
      this.$emit("addCart", this.goods);
    },

    onShare() {
      // 请求数据
      this.$reqGet(APP_MASTER, {
        centerId: this.user.centreId,
        teamId:this.user.upshopTid,
        productId: this.goods.id
      }).then(res => {
        this.billData = res.data.data;
        this.isShare = true;
         this.show = true;
        
      });
    },

    onNumChange() {
      const num = this.cartNum - this.goods.cartNum;
      if (num === 0) {
        return;
      }

      this.$emit("addCart", this.goods, null, (num > 0));
      this.$nextTick(() => {
        this.cartNum = this.goods.cartNum;
      });
    },

    playVideo() {
      this.play = true;
      this.$nextTick(()=> {
        this.$refs.videoPlayer.play();
      });
    },

    stopVideo() {
      this.play = false;
      let player = this.$refs.videoPlayer;
      player.currentTime=0;
      player.pause();
    }
  },
  components: {
    [Stepper.name]: Stepper,
    [Play_bill.name]:Play_bill
  }
};
</script>

<style lang="scss" scoped>
.open {
    width: 250px;
    height: 444px;
    margin: 0 auto;
    margin-top: -60px;
    background: transparent;
    overflow-y: visible;
    .close {
      left: 50%;
      transform: translateX(-11px);
      margin-bottom: 12px;
    }
  .openImg {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.foucs_text {
  position: absolute;
  left: 0;
  top: 0;
  background-color: $red;
  color: white;
  border-radius: 8px 0 8px 0;
  padding: 0 2px;
  display: inline-block;
  line-height: 20px;
}
.brand {
  position: absolute;
  top: 25px;
  left: 12px;
  width: 50px;
  height: 25px;
  img {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
}
.pro_into {
  position: absolute;
  bottom: 0;
  left: 0;
  font-weight: 900;
  background-color: $red;
  border-radius: 0px 25px 0px 8px;
  padding: 0 15px 0 6px;
  display: inline-block;
  line-height: 26px;
  color: #fff;
  font-size: 14px;
}
.tagline {
  background-color: #999;
  border-radius: 5px;
  color: white;
  font-size: 12px;
  padding: 2px;
}
.name_text {
  margin: 1px 0;
  position: relative;
  .points {
    position: absolute;
    // top: 1px;
    bottom: 10px;
    padding-left: 5px;
    width: 12px;
    height: 12px;
  }
}
.notice_text {
  color: $red;
}
.limitBuy {
  color: gray;
  font-size: 12px;
  .limitNum {
    color:#FF0066;
    font-weight: 900;
  }
}
.share_icon {
  position: absolute;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  bottom: 2px;
  right: 7px;
}

.tag_icon {
  position: absolute;
  right: 10px;
  top: 10px;
  display: inline-block;
  width: 60px;
  height: 60px;
}

.tag_text {
  position: relative;
  height: 0;
  bottom: 26px;
  text-align: center;
}
.tag_zttkURL {
  position: absolute;
  top: 0px;
  text-align: center;
  border-radius: 8px;
  img {
    border-radius: 8px;
  }
}


.cart_button {
  color: white;
  background-color: $green;
  border-radius: 30px;
  height: 34px;
  line-height: initial;
}

@mixin goods_status {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
}
.shouqing_mask {
  @include goods_status;
	background-color: gray;
  opacity: 0.5;
  border-radius: 8px;
}
.shouqing_image {
  @include goods_status;
  background: url(../../../assets/images/shouqing.png) no-repeat center;
  background-size: 180px;
}
.timeover_image {
  @include goods_status;
  background: url(../../../assets/images/yijieshu.png) no-repeat center;
  background-size: 180px;
}
.play_btn {
  position: absolute;
  text-align: center;
  left: 50%;
  margin-left: -30px;
  top: 40%;
  z-index: 2;
}

.vip_panel {
  margin-right: 10px;
  color: $red;
  border-radius: 5px;
  font-size: 24px;

  ::before {
    content: '会员 ¥';
    font-size: 14px;
  }
}

.vip_text {
  vertical-align: text-bottom;
}

.thumb_panel {
  position: relative;
  >img {
    border-radius: 8px;
    display: block;
  }
}
.cart_info {
  color: white;
}

.stop_text {
  position: absolute;
  top: -3px;
  right: 10px;
  color: $red;
}
</style>
<style lang="scss">
   .save_img {
     width: 100%;
     .save {
        width: 160px;
        height: 30px;
        line-height: 30px;
        margin-top: 20px;
        left: 50%;
        transform: translateX(-80px);
        border-radius: 30px;
     }
     
    } 
</style>